<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>校园一卡通管理系统</title>
    <!-- 网页在浏览器上的图标 -->
    <link type="text/html" rel="icon" href="../image/logo.png">
    <!-- 引入layui的css -->
    <link type="text/css" rel="stylesheet" href="../lib/layui/css/layui.css">
    <!-- 引入layui的js -->
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/jQuery/jquery-3.7.1.js"></script>
    <style>
        /* 引入外部字体，代码参考示例代码 */
        @font-face {
            font-family: "阿里妈妈数黑体 Bold";
            font-weight: 700;
            src: url("fonts/h19CoRX1LtmC.woff2") format("woff2"),
            url("fonts/h19CoRX1LtmC.woff") format("woff");
            font-display: swap;
        }
        /* ====== 顶部导航 ====== */
        nav {
            height: 45px;
            line-height: 45px;
            background: linear-gradient(to left, #7b4397, #2196f3);
        }
        nav>span {
            font-family: '阿里妈妈数黑体 Bold',serif;
            font-size: 28px;
            color: #fff;
            margin-left: 15px;
        }
        nav>ul.layui-nav {
            float: right;
        }
        nav>ul.layui-nav>li.layui-nav-item>a {
            font-size: 20px;
            color: #fff;
            cursor: pointer;
        }
        nav>ul.layui-nav>li.layui-nav-item>dl>dd>a {
            cursor: pointer;
        }
        nav>ul.layui-nav>li.layui-nav-item>dl>dd>a:hover {
            background: #2196f3;
            color: #fff;
        }
        /* ====== 左侧菜单 ====== */
        div>ul.layui-nav-tree>li.layui-nav-item>a>i.general-icon {
            margin-right: 10px;
        }
        div>ul.layui-nav-tree>li.layui-nav-item>a {
            background: #fff;
            color: #5f5c5c;
            cursor: pointer;
        }
        div>ul.layui-nav-tree>li.layui-nav-item>a:hover {
            background: linear-gradient(to left, #7c8ce4, #2196f3);
            color: #fff;
        }
        /* 处理二级菜单上下的灰色背景 */
        div>ul.layui-nav-tree>li.layui-nav-item>dl.layui-nav-child {
            background-color: #fff !important;
        }
        div>ul.layui-nav-tree>li.layui-nav-item>dl.layui-nav-child>dd>a {
            background: #fff;
            color: #5f5c5c;
            padding-left: 43px;
            cursor: pointer;
        }
        div>ul.layui-nav-tree>li.layui-nav-item>dl.layui-nav-child a:hover {
            background: linear-gradient(to left, #7c8ce4, #2196f3);
            color: #fff;
        }
        div>ul.layui-nav-tree>li.layui-nav-itemed a {
            color: #5f5c5c !important;
        }
        div>ul.layui-nav-tree>li.layui-nav-itemed a:hover {
            color: #fff !important;
            background: linear-gradient(to left, #7c8ce4, #2196f3);
        }
        /* .layui-nav-bar影响鼠标停放在二级菜单上的背景颜色（左边一小块儿） */
        div>ul.layui-nav-tree .layui-nav-bar {
            background: #7b4397;
        }
        /* 部分浏览器出现绿色背景一闪而过的情况，需要对.layui-this的样式进行覆盖 */
        div>ul.layui-nav-tree>li.layui-this>a,
        div>ul.layui-nav-tree>li.layui-nav-item>dl.layui-nav-child>dd.layui-this>a,
        div>ul.layui-nav-tree>li.layui-nav-itemed>dl.layui-nav-child>dd.layui-this>a
        {
            color: #fff !important;
            background: linear-gradient(to left, #7c8ce4, #2196f3) !important;
        }

        div.menuTab {
            position: absolute;
            top: 45px;
            left: 200px;
            right: 0;
            bottom: 0;
            margin: 0;
            background: #EFEEF0;
        }
        div.menuTab>ul.layui-tab-title {
            background: #eeeeee;
            border: none;
        }
        div.menuTab>ul.layui-tab-title>li {
            border: none;
        }
        div.menuTab>ul.layui-tab-title>li.layui-this {
            background: #fff;
            border: none;
        }
        div.menuTab>div.layui-tab-content {
            position: absolute;
            padding: 0;
            top: 40px;
            width: 100%;
            /*height: 100%;*/
            overflow: hidden;
            left: 0;
            right: 0;
            bottom: 0;
        }
        div.menuTab>div.layui-tab-content>div.layui-tab-item {
            width: 100%;
            height: 100%;
            right: 0;
            bottom: 0;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
            margin: 0;
            padding: 0;
            right: 0;
            bottom: 0;
        }
    </style>
    <script>
        // $(document).ready();
        // 初始化的方法
        layui.use(function() {
            layui.sessionData('changePassword', {key: 'isOk', value: false});
            let layer = layui.layer;
            let util = layui.util;
            let element = layui.element;

            function changePassword() {
                layer.open({
                    type: 2, // 表示iframe
                    title: '修改密码',
                    area: '440px', // 区域大小
                    shade: 0.6,
                    maxmin: true, // 开启最大化、最小化的按钮
                    btnAlign: 'c',
                    content: ['page/system/changePassword.html', 'no'],
                    success: function(layero, index, that){
                        layer.iframeAuto(index); // 让 iframe 高度自适应
                        that.offset(); // 重新自适应弹层坐标
                    },
                    end: function() {
                        // 拿到标记值判断
                        if (layui.sessionData('changePassword').isOk) {
                            location.href = 'login.html';
                        }
                    }
                });
            }

            // 绑定事件
            util.on('lay-on', {
                // lay-on属性的值
                'loginOut': function() {
                    // 退出到登录页
                    location.href = 'login.html';
                },
                // 值可以是匿名方法，也可以是已存在的方法
                'changePassword': changePassword
            });

            $('ul.layui-nav-tree>li.layui-nav-item a').click(function() {
                // 二级菜单的父级菜单不做处理
                // 当前是a标签，父级是li，父级还有子元素dl，就证明是二级菜单的父菜单
                if ($(this).parent().children().is('dl')) {
                    return;
                }
                // 生成对应的tab标签
                let title = $(this).text();
                // 内联对应的html页面
                let page = $(this).attr('page');
                if (!page) {
                    return;
                }
                // 计算id
                // page/user/student/studentList.html -> studentList
                let id = page.substring(page.lastIndexOf('/') + 1, page.lastIndexOf('.'));
                // 如果有对应id存在，切换到对应的tab
                // 遍历所有的li，如果一旦有当前id
                for (let i = 0; i < $('div.layui-tab>ul.layui-tab-title>li').length; i++) {
                    if ($('div.layui-tab>ul.layui-tab-title>li').eq(i).attr('lay-id') === id) {
                        // 切换过去
                        element.tabChange('menuTab', id);
                        return;
                    }
                }
                element.tabAdd('menuTab', {
                    title: title,
                    content: '<iframe src="' + page + '"></iframe>',
                    id: id,  // 使用html的文件名字，加到了tab标签的lay-id属性
                    change: true // 是否添加完毕后即自动切换
                })
            });
        });
    </script>
</head>
<body>
<nav>
    <span>校园一卡通管理系统</span>
    <ul class="layui-nav" style="height: 45px; background: rgba(0,0,0,0)">
        <li class="layui-nav-item" style="height: 45px; line-height: 45px">
            <a>admin</a>
            <dl class="layui-nav-child" style="top: 45px;">
                <dd><a lay-on="changePassword">修改密码</a></dd>
                <!-- class="layui-this" -->
                <dd ><a lay-on="loginOut">退出</a></dd>
            </dl>
        </li>
    </ul>
</nav>
<div style="position: absolute; top: 45px; bottom: 0">
    <ul class="layui-nav layui-nav-tree"
        style="height: 100%; border-radius: 0; background: #fff">
        <li class="layui-nav-item">
            <a >
                <!-- 第一个class表明是layui图标 -->
                <!-- 第二个class是自定义的class，方便后续统一处理样式 -->
                <!-- 第三个class表明是具体的哪个layui图标 -->
                <i class="layui-icon general-icon layui-icon-template-1"></i>卡类型管理
            </a>
        </li>
        <!-- layui-nav-itemed -->
        <li class="layui-nav-item">
            <a>
                <i class="layui-icon general-icon layui-icon-username"></i>用户管理
            </a>
            <dl class="layui-nav-child">
                <dd><a page="page/user/student/studentList.html">学生管理</a></dd>
                <dd><a page="page/user/teacher/teacherList.html">教职工管理</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a>
                <i class="layui-icon general-icon layui-icon-dollar"></i>流水管理
            </a>
            <dl class="layui-nav-child">
                <dd><a>充值管理</a></dd>
                <dd><a>消费管理</a></dd>
            </dl>
        </li>
    </ul>
</div>

<div lay-filter="menuTab" class="layui-tab menuTab" lay-allowclose="true">
    <ul class="layui-tab-title">
        <li lay-id="studentList" class="layui-this">学生管理</li>
        <!-- 由左边点击添加 -->
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <iframe src="page/user/student/studentList.html"></iframe>
        </div>
        <!-- 由左边点击内联渲染某个html -->
    </div>
</div>
</body>
</html>